<%--
  Created by IntelliJ IDEA.
  User: 26421
  Date: 2020/8/11
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>购物车</title>
    <!--标题图标-->
    <link rel="icon" href="/images/homepage/favicon.ico">
    <link rel="stylesheet" href="../static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="../static/layui/css/layui.css">

    <link rel="stylesheet" href="//at.alicdn.com/t/font_1971187_irk7ljpw4q.css">

    <%--    <style>--%>
    <%--        /*#body{*/--%>

    <%--        /*    width: 100%;*/--%>
    <%--        /*    height: 100%;*/--%>
    <%--        /*    background-color: rgb(245, 245, 245);*/--%>
    <%--        /*    display: flex;*/--%>
    <%--        /*    flex-direction: column;*/--%>
    <%--        /*}*/--%>


    <%--    </style>--%>
    <%--搜索框--%>
    <style>
        /*#search {*/
        /*    height: 150px;*/
        /*    display: flex;*/
        /*    justify-content: center;*/
        /*    align-items: center;*/
        /*}*/

        /*#search .layui-form-item .layui-input-inline:nth-child(1) {*/
        /*    margin-right: 0;*/
        /*    width: 400px;*/
        /*    background-color: red;*/
        /*}*/

        /*#search .layui-input, #search .layui-select, .layui-textarea {*/
        /*    border: 2px solid #009688;*/
        /*    border-radius: 0px;*/

        /*}*/


        /*#search .layui-btn {*/
        /*    border-radius: 0px;*/
        /*}*/
        .mi-body {
            width: 100%;

            background-color: rgb(245, 245, 245);
            display: flex;
            flex-direction: column;
        }

        #content {

            width: 1226px;
            background-color: rgb(245, 245, 245);
            margin: 15px auto;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }

        #content .list-wrapper {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #content .list-wrapper .list-item {
            background-color: white;
            margin: 0px auto;

            border-bottom: #504f4f 0.5px solid;
            display: flex;
            justify-content: space-between;

            width: 100%;
            height: 86px;
        }

        #content .list-wrapper .list-item .order1 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 230px;
        }

        #content .list-wrapper .list-item .order2 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 380px;
        }

        #content .list-wrapper .list-item .order3 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 140px;
            padding-right: 18px;
        }

        #content .list-wrapper .list-item .order4 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 150px;
        }

        #content .list-wrapper .list-item .order5 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 120px;
            padding-right: 81px;
        }

        #content .list-wrapper .list-item .order6 {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 80px;
        }

        #content .list-wrapper .list-item .order6 .order6-icon {

            /*background-color: red;*/
            width: 20px;
            height: 20px;
            /*background-color: rebeccapurple;*/

        }

        #content .list-wrapper .list-item .order6 .order6-icon > i {
            display: inline-block;
            height: 20px;
        }


        #content .list-wrapper .list-item .img-wrapper {
            display: flex;
            justify-items: center;
            align-items: center;
            margin-left: 20px;
        }

        #content .list-wrapper .list-item .img-wrapper .activePath {
            display: flex;
            justify-items: center;
            align-items: center;

        }

        #content .list-wrapper .list-item .price-wrapper {

        }

        /*结算栏*/
        .end-wrapper {
            display: flex;
            justify-content: space-between;
            background-color: white;
            height: 50px;
            align-content: center;
            align-items: center;
        }

        .end-wrapper .section-left {

            display: flex;
            justify-content: space-around;
            align-content: center;
            font-size: 15px;


        }

        .end-wrapper .section-left .left-1 {

            margin-left: 32px;


        }

        .end-wrapper .section-left .biaoqian {
            width: 32px;
            text-align: center;
        }

        .end-wrapper .section-right {
            display: flex;
            justify-content: space-between;
            align-content: center;
            font-size: 15px;
            height: 50px;
            text-align: center;
            align-items: center;
        }

        .end-wrapper .section-right > span {
            text-align: center;
            line-height: 50px;
        }

        .end-wrapper .section-right > a {
            border-radius: 6px 6px 6px 6px;
            display: block;
            width: 200px;
            height: 46px;
            margin-left: 50px;
            border: 1px;
            background-color: orange;
            text-align: center;
            line-height: 46px;
            font-size: 18px;
        }


        .head {

            width: 100%;
            background-color: white;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            height: 100px;
            border-bottom: orange 1px solid;


        }

        .head .head-logo {
            background-image: url("/images/homepage/mi-logo.png");
            width: 55px;
            height: 52px;
            text-align: center;
        }

        .head .head-tip {
            display: flex;
            justify-content: flex-start;
        }

        .head .head-tip > h2 {
            margin-left: 45px;
            height: 48px;
            line-height: 48px;
            font-size: 30px;
        }

        .head .head-tip > p {
            margin-left: 15px;
            margin-top: 20px;
        }


    </style>


</head>

<body>

<div class="mi-body">


    <div class="head">
        <div class="head-logo">
            <a href="/user/homepage.jsp"></a>
        </div>
        <div class="head-tip">
            <h2>我的购物车</h2>
            <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>

    </div>

    <%--内容--%>
    <div id="content">
        <div class="list-wrapper">
            <div class="list-item">
                <div class="order1">
                    <input type="checkbox" name="check" onclick="checkAll()" checked>全选 </input>
                </div>
                <div class="order2">
                    <p>商品名称</p>
                </div>
                <div class="order3">
                    <p>单价</p>
                </div>
                <div class="order4">
                    <p>数量</p>
                </div>
                <div class="order5">
                    <p>商小计</p>
                </div>
                <div class="order6">
                    <p>操作</p>
                </div>

            </div>
            <c:forEach items="${list}" var="item">
                <div class="list-item">
                    <div class="order1">
                        <input type="checkbox" name="check" onclick="checkNum(this)" checked value="1">
                        <div class="img-wrapper">
                            <a href="/api/good/selectById?gid=${item.gid}">
                                <img class="activePath" src="${item.activePath}" alt="" width="80" height="80">
                            </a>
                        </div>
                    </div>

                    <div class="order2">
                        <p class="title">${item.title}</p>
                    </div>
                    <div class="order3">
                            ${item.price}
                    </div>
                    <div class="order4">

                            <%--                    <p>数量1</p>--%>
                        <input class="dec" type="button" value="-" onclick="dec(this)" name="减按钮">
                        <input class="count" type="text" value="${item.orders}" size="1" style="text-align:center;"
                               name="数量">
                        <input class="inc" type="button" value="+" onclick="inc(this)">

                    </div>


                    <div class="order5">

                            <%--                            ${(item.price)*(item.orders)}--%>
                        <i id="price" class="text">${(item.price)*(item.orders)}</i>

                    </div>
                    <div class="order6">
                            <%--                        <input type="button" width="10" height="10" >--%>
                        <div class="order6-icon">
                            <i class="iconfont iconshanchu"></i>
                        </div>

                    </div>
                </div>
            </c:forEach>

        </div>
        <%--    结算栏--%>
        <div class="end-wrapper">
            <div class="section-left">
                <%--                预留继续购物功能，返回homepage的页面--%>
                <%--    <form action="/api/good/selectGoodList" method="get" class="layui-form">--%>
                <a href="/user/homepage.jsp" class="left-1">继续购物</a>
                <%--    </form>--%>
                <span class="biaoqian">|</span>
                <span>
                共
                <i id="sp1" class="text" style="color: orange"></i>
                件商品，已选择
                <i id="sp2" class="text" style="color: orange"></i>
                件商品
            </span>
            </div>
            <div class="section-right">
            <span>
                合计
                <i id="totalprice" class="text" style="color: orange;font-size: 33px"></i>
                元
            </span>

                <%--这里预留了付款结束的页面--%>
                <%--<form action="" method="get" >--%>
                <a id="checkoutLink" onclick="updateCheckoutURL()" href="/user/homepage.jsp">
                    去结算
                </a>
                <%--</form>--%>

            </div>

        </div>


    </div>
    <%--=推荐内容--%>
    <div>
        <jsp:include page="mi-recommend.jsp"/>
    </div>


    <%--尾部--%>


</div>
<div>
    <jsp:include page="footer.jsp"/>
</div>


<!--引入静态库的jquery框架-->
<script src="/static/js/jquery.min.js"></script>
<script>
    //使用JS脚本控制微信二维码的显示和隐藏
    //由于CSS:hover无法控制父元素，因此使用JS+jQuery来控制
    let wxQRCode = $(".col-contact .follow #J_followWxImg");
    $(".col-contact .follow #J_followWx").mouseenter(function (event) {
        wxQRCode.css({
            "display": "inline",
            "z-index": "500"
        });
    })

    $(".col-contact .follow #J_followWx").mouseleave(function (event) {
        wxQRCode.css("display", "none");
    })
</script>


<script>


    var items = document.getElementsByName("check");
    var prices = document.getElementsByClassName("order5")
    var initprice = 0
    for (var j = 1; j < prices.length; j++) {
        initprice = parseInt(initprice) + parseInt(prices[j].firstElementChild.textContent);
    }

    document.getElementById('totalprice').textContent = initprice;
    <%--    数量减--%>

    function dec(addr) {
        //要验证是否勾选，才允许修改

        // console.log(addr.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild.getAttribute("value"));
        if (addr.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild.getAttribute("value") == 1) {

            if (parseInt(addr.nextElementSibling.getAttribute("value")) > 1) {
                addr.nextElementSibling.setAttribute("value", parseInt(addr.nextElementSibling.getAttribute("value")) - 1);
                var price = 0;

                price = parseInt(addr.nextElementSibling.getAttribute("value")) * parseInt(addr.parentElement.previousElementSibling.innerHTML);
                addr.parentElement.nextElementSibling.firstElementChild.textContent = price;

                // var totalprice=parseInt(document.getElementById('totalprice').textContent)-parseInt(addr.parentElement.previousElementSibling.innerHTML)
                document.getElementById('totalprice').textContent = parseInt(document.getElementById('totalprice').textContent) - parseInt(addr.parentElement.previousElementSibling.innerHTML);


            }


        }


    }

    //数量加
    function inc(incr) {

        if (incr.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.firstElementChild.getAttribute("value") == 1) {
            // console.log(incr.previousElementSibling.getAttribute("value"))
            incr.previousElementSibling.setAttribute("value", parseInt(incr.previousElementSibling.getAttribute("value")) + 1);

            var price = 0;

            price = parseInt(incr.previousElementSibling.getAttribute("value")) * parseInt(incr.parentElement.previousElementSibling.innerHTML);
            incr.parentElement.nextElementSibling.firstElementChild.textContent = price;

            document.getElementById('totalprice').textContent = parseInt(document.getElementById('totalprice').textContent) + parseInt(incr.parentElement.previousElementSibling.innerHTML);


        }

    }

    <%--    全选框功能部分--%>

    function checkAll() {
        var totalprices = 0;
        if (items[0].checked) {
            for (var x = 0; x < items.length; x++) {
                items[x].checked = 1;
                items[x].setAttribute("value", "1");
                console.log(totalprices)
                //价格从下表1开始
                if (x < items.length - 1) {
                    totalprices = (parseInt(totalprices) + parseInt(prices[x + 1].firstElementChild.textContent)).toString();
                }

            }

        } else {
            for (var x = 0; x < items.length; x++) {
                items[x].checked = 0;
                items[x].setAttribute("value", "0");
                totalprices = 0;
            }
        }
        // alert(items.length)


        let sps2 = 0;
        for (var i = 1; i < items.length; i++) {
            if (items[i].checked) {
                sps2 += 1;
            }
        }

        document.getElementById("sp2").innerText = sps2;
        document.getElementById("totalprice").innerText = totalprices.toString();

    }

    //各个商品的勾选框
    function checkNum(index) {
        //获取总价
        var totalprice = document.getElementById("totalprice").innerText;
        if (index.checked) {
            index.setAttribute("value", "1")
            console.log(index.getAttribute("value"))
            totalprice = parseInt(totalprice) + parseInt(index.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.textContent);


        }
        if (!index.checked) {
            index.setAttribute("value", "0")
            console.log(index.getAttribute("value"))
            totalprice = parseInt(totalprice) - parseInt(index.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.textContent);
            // console.log(index.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild.textContent);
        }

        var items = document.getElementsByName("check");
        let sps2 = 0;
        for (var i = 1; i < items.length; i++) {
            if (items[i].checked) {
                sps2 += 1;
            }
        }

        document.getElementById("sp2").innerText = sps2;
        document.getElementById("totalprice").innerText = totalprice;

    }

    //显示几件商品
    let nums = document.getElementsByClassName("list-item");
    let sps = nums.length - 1;

    //要-1，去掉全选框
    document.getElementById("sp1").innerText = sps;
    // document.getElementById("sp1").innerText=sps2;
</script>

<script>
    //结算功能，生成requestURL，发送给后台
    //获取session中附加的user属性
    let sessionUserid = '${user.userid}';
    let sessionUsername = '${user.username}';
    console.log(sessionUserid);
    console.log(sessionUsername);

    function updateCheckoutURL() {
        let totalprice = document.getElementById('totalprice').textContent;
        console.log(totalprice);
        document.getElementById("checkoutLink").setAttribute("href", "/api/user/checkout?userid=" + sessionUserid + "&balance=" + totalprice);
    }
</script>

<%--jquery--%>
<script src="../static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="../static/layui/layui.all.js"></script>
</body>
</html>
